Sự kiện onreadystatechange trong AJAX
Khi bạn đã gửi một Request tới một Server, có thể bạn muốn thực hiện một số hoạt động nào đó trên phần Response được trả về. Điều này có thể thực hiện thông qua sự giúp đỡ của sự kiện onreadystatechange trong AJAX.
Sự kiện onreadystatechange này sẽ được kích hoạt mỗi khi trạng thái readyState thay đổi. Mà thuộc tính readyState này giữ phần biểu diễn status của đối tượng XMLHttpRequest, do đó dựa vào từng giá trị của readyState thì bạn có thể cung cấp hoạt động tương ứng nào đó.
Bảng dưới nhắc lại một số thuộc tính quan trọng của đối tượng XMLHttpRequest trong AJAX:
| Thuộc tính | Miêu tả |
|---|---|
| onreadystatechange | Một Event Handler lắng nghe và xử lý một sự kiện khi có thay đổi về trạng thái nào diễn ra. |
| readyState | Thuộc tính này định nghĩa trạng thái hiện tại của đối tượng XMLHttpRequest.
|
| status | Trả về trạng thái dưới dạng một số (ví dụ: 404 cho "Not Found", 200 cho "OK") |
Trong sự kiện onreadystatechange, chúng ta sẽ xác định xem điều gì sẽ xảy ra khi Response từ Server đã sẵn sàng để được xử lý.
Khi readyState là 4 và status là 200 thì tức là Response đã sẵn sàng:
<html>
<body><div id="demo"><h2>Hay de AJAX giup ban thay doi phan text nay</h2></div><button type="button" onclick="loadDoc()">Click vao day</button><script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script></body>
</html>
Ghi chú: sự kiện onreadystatechange được kích hoạt 5 lần (tương ứng với các giá trị của status).
Sử dụng hàm callback trong sự kiện onreadystatechange
Hàm Callback là một hàm được truyền dưới dạng như là một THAM SỐ cho một hàm khác.
Nếu bạn có nhiều hơn một tác vụ AJAX trên Website của bạn, thì bạn nên tạo một hàm để tạo đối tượng XMLHttpRequest, và gọi hàm này cho mỗi tác vụ AJAX.
Lời gọi hàm này nên có một URL và điều cần làm tương ứng với sự kiện onreadystatechange (có thể khác nhau cho mỗi lời gọi hàm).
function loadDoc(url, cfunc) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
cfunc(xhttp);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.
Loạt bài hướng dẫn học Ajax cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
